<!DOCTYPE html>
<html>
<head>
    <title>Animation动画示例</title>
    <style>
        /*? 元素的初始样式 */
        .animated-element {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            position: relative;
            /*? 定义动画 帧 时间 一直播放*/
            animation: moveAndRotate 3s infinite;
        }

        /*? 定义动画关键帧 从左上到右下再回左上为一轮 并附带自旋转*/
        @keyframes moveAndRotate {
            0% {
                top: 0;
                left: 0;
                transform: rotate(0deg);
            }
            50% {
                top: 200px;
                left: 200px;
                transform: rotate(180deg);
            }
            100% {
                top: 0;
                left: 0;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="animated-element"></div>
</body>
</html>
